<html lang="en"><head>
    <meta charset="UTF-8">

    <meta name="apple-mobile-web-app-title" content="CodePen">

    <title>https://codepen.io/myacode/pen/PoqQQNM</title>

    <link rel="stylesheet" href="./style.css">
    <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
    <script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>
</head>
<body>
<label class="debug">
    <input id="debug" type="checkbox">
    Debug
</label>
<div class="grid">
    <div class="menu cross menu--1">
        <label>
            <input type="checkbox">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="30" />
                <path class="line--1" d="M0 40h62c13 0 6 28-4 18L35 35" />
                <path class="line--2" d="M0 50h70" />
                <path class="line--3" d="M0 60h62c13 0 6-28-4-18L35 65" />
            </svg>
        </label>
    </div>
    <div class="menu cross menu--2">
        <label>
            <input type="checkbox">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="30" />
                <path class="line--1" d="M0 70l28-28c2-2 2-2 7-2h64" />
                <path class="line--2" d="M0 50h99" />
                <path class="line--3" d="M0 30l28 28c2 2 2 2 7 2h64" />
            </svg>
        </label>
    </div>
    <div class="menu back menu--3">
        <label>
            <input type="checkbox">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="30" />
                <path class="line--1" d="M0 40h62c18 0 18-20-17 5L31 55" />
                <path class="line--2" d="M0 50h80" />
                <path class="line--3" d="M0 60h62c18 0 18 20-17-5L31 45" />
            </svg>
        </label>
    </div>
    <div class="menu back menu--4">
        <label>
            <input type="checkbox">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="30" />
                <path class="line--1" d="M0 55l14-10c4.7-3.3 9-5 13-5h72" />
                <path class="line--2" d="M0 50h99" />
                <path class="line--3" d="M0 45l14 10c4.7 3.3 9 5 13 5h72" />
            </svg>
        </label>
    </div>
</div>


<!-- dribbble - twitter -->
<a class="dribbble" href="https://dribbble.com/TaminoMartinius" target="_blank">
    <img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""/>
</a>
<a class="twitter" target="_top" href="https://twitter.com/TaminoMartinius">
    <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72">
        <path d="M67.812 16.141a26.246 26.246 0 0 1-7.519 2.06 13.134 13.134 0 0 0 5.756-7.244 26.127 26.127 0 0 1-8.313 3.176A13.075 13.075 0 0 0 48.182 10c-7.229 0-13.092 5.861-13.092 13.093 0 1.026.118 2.021.338 2.981-10.885-.548-20.528-5.757-26.987-13.679a13.048 13.048 0 0 0-1.771 6.581c0 4.542 2.312 8.551 5.824 10.898a13.048 13.048 0 0 1-5.93-1.638c-.002.055-.002.11-.002.162 0 6.345 4.513 11.638 10.504 12.84a13.177 13.177 0 0 1-3.449.457c-.846 0-1.667-.078-2.465-.231 1.667 5.2 6.499 8.986 12.23 9.09a26.276 26.276 0 0 1-16.26 5.606A26.21 26.21 0 0 1 4 55.976a37.036 37.036 0 0 0 20.067 5.882c24.083 0 37.251-19.949 37.251-37.249 0-.566-.014-1.134-.039-1.694a26.597 26.597 0 0 0 6.533-6.774z"/>
    </svg>
</a>
</body>
<script src="script.js" type="module"></script>
</html>